<template>
  <div class="goods-container">
    <my-header title="选择商品"></my-header>
    <my-content>
      <!-- <my-tab v-model="tabPosition" :tabList="tabList" start></my-tab> -->
      <scroll-view scroll-y class="goods-scroll" @scrolltolower="lower">
        <view
          @click="selected(item, index)"
          class="box-item"
          v-for="(item, index) in orderData"
          :key="index"
          :style="{ backgroundImage: `url(https://www.dingxians.cn/upload/images/box/bg-box-${item.level_id}.png)` }"
        >
          <view class="time" style="visibility: hidden">{{ item.created_at }}</view>
          <view class="goods-info">
            <image class="goods-img" :src="item.blind_box_prize_image"></image>
            <view class="goods-content">
              <view class="goods-name">{{ item.blind_box_prize_name }}</view>
              <view class="goods-price">
                ￥{{ item.price }}
                <my-number-box :show="item.num > 1" v-model="item.num" :max="item.num" :min="1"></my-number-box>
              </view>
              <view class="goods-recovery-price">拒提价：{{ item.recovery_price }}</view>
              <view class="goods-tips" v-if="item.status === 2">赠送时间：{{ item.give_at }}</view>
              <view class="goods-tips" v-if="item.status === 3">拒提时间：{{ item.exchange_at }}</view>
              <view class="goods-tips" v-if="item.status === 4">反悔时间：{{ item.back_at }}</view>
              <view class="goods-tips" v-if="item.status === 5">提货时间：{{ item.updated_at }}</view>
            </view>
          </view>
          <view class="goods-bottom">
            <view class="goods-title">{{ item.blind_box_name }} [{{ item.resource }}]</view>
            <view class="create-at">{{ item.created_at }}</view>
          </view>

          <image
            class="select"
            :src="'https://www.dingxians.cn/upload/images/common/' + (item.selected ? 'selected' : 'unselected') + '.png'"
          ></image>
        </view>
      </scroll-view>
      <view class="bottom">
        <view class="bottom_select" @click="allQuery()">
          <image class="bottom_select_icon" src="https://www.dingxians.cn/upload/images/common/unselected.png" v-if="!allSelected"></image>
          <image class="bottom_select_icon" src="https://www.dingxians.cn/upload/images/common/selected.png" v-if="allSelected"></image>
          <view style="font-size: 24rpx">全选</view>
          <view class="bottom_box">
            <!-- <view class="bottom_text">
              <view>已选</view>
              <view class="bottom_text_num">{{ num }}</view>
              <view class="bottom_txt">件</view>
            </view> -->
            <!-- <view class="bottom_title">
              <view>可拒提：</view>
              <view class="total_recovery_price">
                {{ total_recovery_price }}
              </view>
              <image mode="widthFix" class="gold" src="https://www.dingxians.cn/upload/images/shop/money.png"></image>
            </view> -->
          </view>
        </view>

        <view class="exchange_btn btn-primary" v-if="num === 0">确认</view>
        <view class="exchange_btn btn-primary exchange" v-if="num > 0" @click="confirmAdd">确认</view>
      </view>
    </my-content>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import api from '../../api'
export default {
  data() {
    return {
      tabList: [
        { id: 0, title: '全部' },
        { id: 1, title: '史诗' },
      ],
      tabPosition: 0,
      orderData: [],
      allSelected: false,
      page: 1,
      lastPage: 1,
    }
  },
  watch: {
    tabPosition() {
      this.page = 1
      this.lastPage = 1
      this.getOrders()
    }
  },
  computed: {
    ...mapState("compound", ["goodsList"]),
    // 选中的商品
    num() {
      let total_num = 0
      this.orderData
        .filter((item) => {
          return item.selected == true
        })
        .forEach((item) => {
          total_num += item.num
        })
      return total_num
    },
    total_recovery_price() {
      var total = 0
      this.orderData
        .filter((item) => {
          return item.selected == true
        })
        .forEach((item) => {
          total += item.recovery_price * item.num
        })
      return total.toFixed(2)
    },
  },
  onLoad(options) {
    this.getOrders()
  },
  methods: {
    ...mapMutations("compound", ["addGoods"]),
    lower() {
      if (this.page >= this.lastPage) {
        this.show("已经没有更多了")
        return
      }
      this.page++
      this.getOrders()
    },
    confirmAdd() {
      this.addGoods(this.orderData.filter(item => item.selected))
      // uni.$emit('add', this.orderData.filter(item => item.selected))
      uni.navigateBack()
    },
    async getOrders() {
      await uni.showLoading()
      try {
        const result = await api.blindBoxOrderPrizes.index({
          page: this.page,
          status: 1,
        })
        if (result.code === 200) {
          result.data.data.forEach(item => item.selected = this.goodsList.some(v => item.id === v.id))
          if (this.page === 1) {
            this.orderData = result.data.data
          } else {
            this.orderData = this.orderData.concat(result.data.data)
          }
          this.lastPage = result.data.last_page
        }
      } finally {
        uni.hideLoading()
      }
    },
    allQuery() {
      this.allSelected = !this.allSelected
      for (let i = 0; i < this.orderData.length; i++) {
        this.orderData[i].selected = this.allSelected
        this.$set(this.orderData, i, this.orderData[i])
      }
    },
    selected(item, index) {
      item.selected = !item.selected
      this.$set(this.orderData, index, item)
    },
  },
}
</script>

<style lang="scss" scoped>
.goods-container {
  height: 100vh;
  background: url(https://www.dingxians.cn/upload/images/common/bg.png) 100%/100%;
  /*display: flex;
  flex-direction: column;*/

  /* #ifdef MP-WEIXIN */
  ::v-deep .my-content {
    height: 100vh;
  }
  /* #endif */

  .goods-scroll {
    height: 100%;
    overflow-y: hidden;
    flex: 1;
  }

  .box-item {
    margin: 0 auto 0 auto;
    width: 710rpx;
    height: 460rpx;
    background-size: 100% 100%;
    color: white;
    box-sizing: border-box;
    padding: 50rpx 50rpx;
    position: relative;

    .create-at {
      font-size: 24rpx;
      text-align: right;
      margin-right: 20rpx;
    }

    .goods-img {
      width: 160rpx;
      height: 160rpx;
      margin-left: 31rpx;
      margin-top: 50rpx;
    }

    .goods-info {
      margin-top: 20rpx;
      display: flex;

      .goods-content {
        flex: 1;
        margin-left: 30rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .goods-name {
          width: 400rpx;
          margin-top: 30rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 28rpx;
        }

        .goods-price {
          font-size: 40rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .goods-num {
            font-size: 24rpx;
          }
        }

        .goods-recovery-price {
          font-size: 22rpx;
        }

        .goods-tips {
          font-size: 22rpx;
        }

        .timeout {
          color: red;
        }
      }
    }

    .select {
      width: 32rpx;
      height: 32rpx;
      position: absolute;
      right: 60rpx;
      top: 60rpx;
    }

    .goods-bottom {
      margin-top: 40rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .goods-title {
        font-size: 24rpx;
        margin-left: 20rpx;
      }

      .goods-control {
        .action-btn {
          margin-right: 20rpx;
          width: 100rpx;
          height: 46rpx;
        }
      }
    }
  }

  .bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 120rpx;
    background-color: #141414;
    align-items: center;
    color: white;

    .bottom_select {
      display: flex;
      align-items: center;

      .bottom_select_icon {
        width: 32rpx;
        height: 32rpx;
        margin: 0 20rpx;
      }
    }

    .bottom_box {
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      font-weight: normal;
      margin-left: 70rpx;

      .bottom_text {
        display: flex;
        align-items: center;

        .bottom_text_num {
          margin: 0 10rpx;
          /* font-weight: bold; */
          font-size: 24rpx;
          color: #ee5093;
        }
      }

      .bottom_title {
        display: flex;
        align-items: center;

        .total_recovery_price {
          /* font-weight: bold; */
          color: #ee5093;
          font-size: 24rpx;
        }

        .gold {
          width: 30rpx;
          height: 30rpx;
          margin-left: 10rpx;
        }
      }
    }

    .exchange_btn {
      height: 84rpx;
      line-height: 84rpx;
      text-align: center;
      width: 228rpx;
      margin: 0 20rpx;
      font-size: 28rpx;
      background-size: 100% 100%;
      filter: grayscale(1);

      &.exchange {
        filter: none;
        color: #fff;
      }
    }
  }
}
</style>
